<template>
  <div class="boxss">
    <div class="titles">
      <span>商家互联</span>
      <!-- <span style="">
        提号折扣：{{ connection.supplyRise }}折
      </span> -->
      <el-button type="text" @click="openDialog">提号折扣：{{ connection.supplyRise ||10}}折</el-button>
    </div>
    <div class="flex comp2-box">
      <div>
        <div class="flex flexa">
          <img src="@/assets/img/index/comp2-1.png" alt="数量">
          <span class="num-title">当前商家</span>
        </div>
        <div class="num">{{ connection.merchantNumber }}</div>
      </div>
      <div>
        <div class="flex flexa">
          <img src="@/assets/img/index/comp2-2.png" alt="成本">
          <span class="num-title">互提成交</span>
        </div>
        <div class="num">{{ connection.mutualMention }}</div>
      </div>
      <div class="last" @click="goLink('/huoyuan/jingpailiebiao')">
        <div class="flex flexa">
          <img src="@/assets/img/index/comp2-3.png" alt="售价">
          <span class="num-title">竞拍成交</span>
        </div>
        <div class="num">{{ connection.bidding }}</div>
      </div>
      <div class="last" @click="openDialog">
        <div class="flex flexa">
          <img src="@/assets/img/index/comp2-4.png" alt="预估利润">
          <span class="num-title">勾选我的</span>
        </div>
        <div class="num">{{ connection.checked }}</div>
      </div>
    </div>
    <comp8Dialog ref="comp8DialogRef"></comp8Dialog>
  </div>
</template>
<script>

import homeApi from "@/api/home/newIndex";
import comp8Dialog from "./comp8Dialog.vue";

export default {
  components:{
    comp8Dialog
  },
  computed: {
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
  },
  data() {
    return {
    
     
     
      connection: {},
    
     
    }
  },
  mounted() {
    this.getconnection()
   
  },
  methods: {
 
    async getconnection() {
      const res = await homeApi.connection()
      this.connection = res.data
      console.log("%c Line:73 🍞 this.connection", "color:#4fff4B", this.connection);
    },
    openDialog() {
      this.$refs.comp8DialogRef.open()
    },


    goLink(url) {
      this.$router.push(url);
    }
  },

}
</script>
<style lang="scss" scoped>
@import url('./style.css');

.comp2-box {
  justify-content: space-around;
  margin: 30px 5px 0;
  text-align: center;
}

img {
  width: 18px;
}

.num-title {
  color: #666;
  font-size: 14px;
  margin-left: 4px;
}

.num {
  margin-top: 16px;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
}

.last {
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    //  background: #e7e7e7;
    transform: translateY(-5px);

  }
}

.titles {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
